<!--  -->
<template>
  <div class="container login-wrapper">
    <div class="login-form" @keyup.enter="login">
      <div class="title">后台系统登录</div>
      <div class="input-box">
        <input type="text" id="account" @blur="checkAccount" required autocomplete="off" v-model.trim="formData.account"/>
        <label class="label" for="account"
          ><i class="el-icon-s-custom"></i>账号</label
        >
      </div>
      <div class="message" v-if="accountError"><i class="el-icon-error"></i>{{ accountPattern ? '账号格式错误' : '账号不能为空' }}</div>
      <div class="input-box" :style="{ 'margin-top': accountError ? '20px' : '48px' }">
        <input type="password" id="password" @blur="checkPassword" required autocomplete="off" v-model.trim="formData.password"/>
        <label class="label" for="password"
        ><i class="el-icon-lock"></i>密码</label
        >
      </div>
      <div class="message" v-if="passwordError"><i class="el-icon-error"></i>密码不能为空</div>
      <div class="submit-box" :style="{ 'margin-top': passwordError ? '20px' : '48px' }">
        <div class="submit-btn" @click="login" >登录</div>
      </div>
      <!-- <div class="message"><i class="el-icon-error"></i>账号或密码错误</div> -->
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'
import { mapMutations } from 'vuex'
import { initDynamicRoutes } from '@/router'
export default {
  name: 'MyLogin',
  data() {
    return {
      formData: {
        account: '',
        password: '',
      },
      accountError: false,
      passwordError: false,
      accountPattern: false,
      passwordPattern: false,
    }
  },
  methods: {
    ...mapMutations('user', ['setToken', 'setUserInfo']),
    ...mapMutations('permission', ['setRoutes']),
    checkAccount() {
      if(this.formData.account === '') {
        this.accountError = true
        this.accountPattern = false
        return
      }
      if(!(this.formData.account.length >= 5 && this.formData.account.length <= 10)) {
        this.accountError = true
        this.accountPattern = true
        return
      }
      this.accountError = false
      this.accountPattern = false
    },
    checkPassword() {
      if(this.formData.password === '') {
        this.passwordError = true
      }else if(this.formData.password !== '') {
        this.passwordError = false
      }
    },
    async login() {
      this.checkAccount()
      this.checkPassword()
      if(this.accountError === false && this.passwordError === false) {
        const res = await login(this.formData)
        // console.log(res);
        if(res && res.data) {
          this.setUserInfo(res.data)
          this.setToken(res.data.token)
          // console.log(res.data.rights);
          this.setRoutes(res.data.rights)
          initDynamicRoutes()
          this.$message({ type: 'success', message: '登陆成功' })
          this.$router.push('/dashboard')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  // color: var(--text-sidebar-color);
  // background-color: var(--bg-primary-color);
  color: var(--text-sidebar-hover-color);
  background-color: #100c2a;
}
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  .login-form {
    width: 475px;
    height: 54%;
    padding: 20px;
    // box-sizing: border-box;
    // background-color: #bfa;
    .title {
      width: 100%;
      font-size: 28px;
      line-height: 36px;
      text-align: center;
      padding-bottom: 20px;
    }
  }
}
.input-box {
  height: 47px;
  display: flex;
  margin-top: 40px;
  position: relative;
  label {
    left: 15px;
    top: 0px;
    font-size: 16px;
    line-height: 47px;
    position: absolute;
    pointer-events: none;
    transition: all 0.5s;
  }
  i {
    display: inline-block;
    margin-right: 4px;
  }
  input {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 5px 15px;
    box-sizing: border-box;
    background-color: transparent;
    // border-bottom: aqua solid 1px;
    border: aqua solid 1px;
    border-radius: 5px;
    // color: var(--text-sidebar-color);
    color: var(--text-sidebar-hover-color);
    &:focus + label,
    &:valid + label {
      top: -20px;
      left: 0;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
.submit-box {
  height: 40px;
  font-size: 18px;
  margin-top: 20px;
  // overflow: hidden;
  border-radius: 2px;
  position: relative;
  .submit-btn {
    line-height: 40px;
    text-align: center;
    border-radius: 2px;
    position: absolute;
    z-index: 1;
    top: 1px;
    right: 1px;
    left: 1px;
    bottom: 1px;
    // background-color: var(--bg-primary-color);
    background-color: #100c2a;
    cursor: pointer;
    border: aqua solid 1px;
    transition: var(--tran-01);
    &:hover {
      border: transparent solid 1px;
    }
  }
  &::before {
    content: '';
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      45deg,
      #fb0094,
      #00f,
      #0f0,
      #ff0,
      #f00,
      #fb0094,
      #00f,
      #0f0,
      #ff0,
      #f00
    );
    background-size: 400%;
    transition: 0.5s;
    animation: animate 20s linear infinite;
  }
  &::after {
    content: '';
    position: absolute;
    border-radius: 2px;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      45deg,
      #fb0094,
      #00f,
      #0f0,
      #ff0,
      #f00,
      #fb0094,
      #00f,
      #0f0,
      #ff0,
      #f00
    );
    background-size: 400%;
    filter: blur(20px);
    transition: 0.5s;
    animation: animate 20s linear infinite;
  }
  &:hover::before,
  &:hover::after {
    opacity: 1;
  }
}
.message {
  padding: 2px 0 6px 0;
  font-size: 14px;
  line-height: 20px;
  // text-align: center;
  color: rgb(243, 79, 53);
  i {
    font-size: 12px;
    margin-right: 2px;
    // vertical-align: middle;
  }
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;
  }
  100% {
    background-position: 0 0;
  }
}
</style>
<style lang="scss">
// @import '@/styles/var.scss';
// .container {
//     background-color: $container_bgc;
// }
</style>
